<!DOCTYPE html>
<html lang="fr-x-mtfrom-en">   
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap-listpicker.min.css" />

        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/jquery.input-clear.js"></script>
        <script type="text/javascript" src="js/bootstrap-listpicker.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("select[multiple='multiple']").listpicker();
            });
        </script>
    </head>
    <body>
        <form method="post">
            <select multiple="multiple" name="data[model][field][]">
                <option data-tabs="A" value="1">option 1</option>
                <option data-tabs="B" value="2" disabled="disabled">option 2</option>
                <option data-tabs="C" value="3">option 3</option>
                <option data-tabs="A,C" value="4">option 4</option>
                <option value="5" selected="selected">option 5</option>
            </select>
        </form>
    </body>
</html>
